<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋在线对战 - 游戏大厅</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
            <div style="display: flex; align-items: center;">
                <img src="logo.svg" alt="五子棋Logo" style="width: 40px; height: 40px; margin-right: 10px;">
                <h1 style="margin: 0; font-size: 24px;">五子棋在线对战</h1>
            </div>
            <div style="display: flex; align-items: center;">
                <span id="current-user" style="margin-right: 20px;">欢迎，玩家001</span>
                <a href="login.html" class="btn btn-danger" style="padding: 5px 10px; font-size: 14px;">退出登录</a>
            </div>
        </header>
        
        <div class="hall-container fade-in">
            <!-- 左侧用户信息面板 -->
            <div class="user-panel">
                <h2>用户信息</h2>
                <div class="user-stats">
                    <div class="stat-item">
                        <span>用户名</span>
                        <span id="user-name">玩家001</span>
                    </div>
                    <div class="stat-item">
                        <span>总比赛场数</span>
                        <span id="total-games">42</span>
                    </div>
                    <div class="stat-item">
                        <span>获胜场数</span>
                        <span id="win-games">28</span>
                    </div>
                    <div class="stat-item">
                        <span>当前积分</span>
                        <span id="current-score">126</span>
                    </div>
                </div>
            </div>
            
            <!-- 中央匹配区域 -->
            <div class="matching-area">
                <h2>在线匹配</h2>
                <div id="matching-btn" class="matching-btn">
                    开始匹配
                </div>
                
                <div id="matching-status" class="matching-status" style="display: none;">
                    <p>正在匹配中...</p>
                    <div class="loader"></div>
                    <p>已等待时间: <span id="waiting-time">0</span> 秒</p>
                    <button id="cancel-btn" class="btn btn-warning" style="margin-top: 15px;">取消匹配</button>
                </div>
            </div>
            
            <!-- 右侧积分流水面板 -->
            <div class="history-panel">
                <h2>对局历史</h2>
                <div class="history-list">
                    <div class="history-item">
                        <div>
                            <span>2025-03-31 15:30</span>
                            <span>对手: 玩家002</span>
                        </div>
                        <div>
                            <span class="win">胜利</span>
                            <span>+5分</span>
                        </div>
                    </div>
                    <div class="history-item">
                        <div>
                            <span>2025-03-31 14:15</span>
                            <span>对手: 玩家005</span>
                        </div>
                        <div>
                            <span class="lose">失败</span>
                            <span>-3分</span>
                        </div>
                    </div>
                    <div class="history-item">
                        <div>
                            <span>2025-03-31 13:45</span>
                            <span>对手: 玩家008</span>
                        </div>
                        <div>
                            <span class="win">胜利</span>
                            <span>+5分</span>
                        </div>
                    </div>
                    <div class="history-item">
                        <div>
                            <span>2025-03-31 12:20</span>
                            <span>对手: 玩家003</span>
                        </div>
                        <div>
                            <span class="win">胜利</span>
                            <span>+5分</span>
                        </div>
                    </div>
                    <div class="history-item">
                        <div>
                            <span>2025-03-31 11:05</span>
                            <span>对手: 玩家010</span>
                        </div>
                        <div>
                            <span class="lose">失败</span>
                            <span>-3分</span>
                        </div>
                    </div>
                </div>
                
                <div class="pagination">
                    <div class="page-btn active">1</div>
                    <div class="page-btn">2</div>
                    <div class="page-btn">3</div>
                    <div class="page-btn">4</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 匹配功能
        const matchingBtn = document.getElementById('matching-btn');
        const matchingStatus = document.getElementById('matching-status');
        const cancelBtn = document.getElementById('cancel-btn');
        const waitingTimeElement = document.getElementById('waiting-time');
        
        let waitingTime = 0;
        let waitingInterval;
        
        matchingBtn.addEventListener('click', function() {
            // 开始匹配
            matchingBtn.style.display = 'none';
            matchingStatus.style.display = 'block';
            
            // 计时器
            waitingInterval = setInterval(function() {
                waitingTime++;
                waitingTimeElement.textContent = waitingTime;
                
                // 模拟匹配成功（10秒后）
                if (waitingTime === 10) {
                    clearInterval(waitingInterval);
                    // 跳转到游戏页面
                    window.location.href = 'game.html';
                }
            }, 1000);
        });
        
        cancelBtn.addEventListener('click', function() {
            // 取消匹配
            clearInterval(waitingInterval);
            waitingTime = 0;
            waitingTimeElement.textContent = '0';
            matchingBtn.style.display = 'flex';
            matchingStatus.style.display = 'none';
        });
        
        // 分页功能
        const pageButtons = document.querySelectorAll('.page-btn');
        
        pageButtons.forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有活跃状态
                pageButtons.forEach(btn => btn.classList.remove('active'));
                // 添加当前按钮的活跃状态
                this.classList.add('active');
                
                // 这里应该有加载对应页面数据的逻辑
                // 模拟数据加载
                console.log('加载第 ' + this.textContent + ' 页数据');
            });
        });
    </script>
</body>
</html>
